<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>博客-登陆</title>
        <link type="text/css" href="css/login.css" rel="stylesheet"/>
        <script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
     </head>
    <script src="js/jquery-1.11.3.js"></script>
    <body>
        <div class="box">
            <h2>用户登录</h2>
            <form>
                <div class="inputBox">
                    <input type="text" name="" required="" class="username">
                    <label>Username</label>
                </div>
                <div class="inputBox">
                    <input type="password" name="" required="" class="password">
                    <label>password</label>
                </div>

                <input type="button" name="" value="Submit" onclick="login()">
            </form>

        </div>

    </body>

<script>
function login(){
	//　获取用户输入
	var username=$('.username').val();
	var password=$('.password').val();
	//2封装成json格式
	var post_data={'username':username,'password':password};
	console.log(post_data);
	//3发送ajax请求
	$.ajax({
		url:'http://127.0.0.1:8000/v1/tokens',
		type:'post',
		dataType:'json',
		data:JSON.stringify(post_data),
		contentType:'appliction/json',
		success:function(res){
			if (res.code==200){
				window.localStorage.setItem('dnblog_token',res.data.token);
				window.localStorage.setItem('dnblog_user',res.username);
				alert('登录成功');
			}else{
				alert(res.error)
			}
		}
	})
}
</script>

</html>